<template>
  <el-card class="box-card" style="margin-top: 10px">
    <div slot="header" class="clearfix"><span>文件资料</span></div>
    <div class="text item">
      <el-form label-width="140px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="资料需求方" prop="fileObj"
              ><el-input v-model="fileObj.mniName" disabled
            /></el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="tableDataFiles" style="width: 100%">
        <el-table-column prop="mtType" label="文件类型" />
        <el-table-column prop="fileName" label="文件名" show-overflow-tooltip />
        <el-table-column prop="suffix" label="资料类型" />
        <el-table-column prop="createTime" label="上传时间" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <span
              v-if="scope.row.viewUri"
              style="display:flex;align-items:center"
            >
              <el-image
                v-if="
                  scope.row.suffix == 'png' ||
                    scope.row.suffix == 'jpg' ||
                    scope.row.suffix == 'jpeg'
                "
                style="width: 40px; height: 40px; margin-right:10px;border:solid 1px #efefef;"
                :src="scope.row.viewUri"
                :preview-src-list="[scope.row.viewUri]"
              />
              <div
                v-if="scope.row.suffix === 'pdf'"
                :class="{ marginRight: marginR }"
              >
                <el-button
                  size="small"
                  type="primary"
                  @click="showPdf(scope.row.viewUri)"
                  >PDF预览</el-button
                >
              </div>
              <el-button
                size="small"
                type="primary"
                @click="downloadImg(scope.row.viewUri + '/download')"
                >下载</el-button
              >
              <el-button
                v-if="scope.row.viewUri && !disabled"
                size="small"
                type="danger"
                @click="removeImg(scope.row.id)"
                >删除</el-button
              >
            </span>
            <span v-else>
              <span style="display:flex;align-items:center">
                <el-upload
                  ref="fileUplaod"
                  class="upload-demo"
                  :action="
                    environment +
                      '/common/upload/' +
                      fileObj.mniId +
                      '/' +
                      scope.row.mtId +
                      '/' +
                      eiId
                  "
                  :limit="1"
                  :before-upload="beforeAvatarUpload"
                  accept=".jpg,.jpeg,.png,.pdf,.PDF"
                  :headers="fileHeaders"
                  :on-success="successUpload"
                  :on-error="errorUpload"
                  :show-file-list="false"
                >
                  <el-button v-if="!disabled" size="small" type="primary"
                    >点击上传</el-button
                  >
                </el-upload>
              </span>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%"
      ><div class="pdfDiaLog">
        <el-button-group>
          <el-button
            type="primary"
            icon="el-icon-arrow-left"
            size="mini"
            @click="prePage"
            >上一页</el-button
          >
          <el-button type="primary" size="mini" @click="nextPage"
            >下一页<i class="el-icon-arrow-right el-icon--right"
          /></el-button>
        </el-button-group>
        <pdf
          :page="pageNum"
          :src="pdfSrc"
          @progress="loadedRatio = $event"
          @num-pages="pageTotalNum = $event"
        />
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>

  </el-card>
</template>

<script>
import { getToken } from "@/utils/auth"; // get token from cookie
import { deleteFile, filemanageUser } from "@/api/modules/components";
import pdf from "vue-pdf";

export default {
  name: "SingleImageUpload",
  components: {
    pdf
  },
  props: {
    fileType: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: function() {
        return false;
      }
    }
  },
  data() {
    return {
      all: 0,
      eiId: "",
      user: "",
      // 文件table
      environment: process.env.VUE_APP_BASE_API,
      fileHeaders: {
        token: getToken(),
        stype: "user"
      },
      tableDataFiles: [],
      fileObj: {},
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      dialogVisible: false,
      pdfSrc: "",
      marginR: true
    };
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        if (oldVal.query.eiId !== val.query.eiId) {
          this.eiId = val.query.eiId;
          this.getFilsListHandleUser(val.query.eiId);
        }
      },
      // 深度观察监听
      deep: true
    },
    all: function() {
      this.$emit("hasall", this.all);
    }
  },
  created() {
    this.eiId = this.$route.query.eiId;
    this.getFilsListHandleUser();
  },
  methods: {
    // 上一页
    prePage() {
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    },

    // 下一页
    nextPage() {
      let page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    },
    showPdf(val) {
      this.pdfSrc = val;
      this.dialogVisible = true;
    },
    getFilsListHandleUser(val) {
      const that = this;
      filemanageUser(that.fileType, val || that.eiId).then(res => {
        if (res.code === 20000) {
          that.tableDataFiles = res.data.mniContent ? res.data.mniContent : [];
          that.fileObj = {
            mniName: res.data.mniName,
            mniId: res.data.mniId
          };
          if (res.data.mniContent && res.data.mniContent.length > 0) {
            let hasUplaod = 0;
            for (var i = 0; i <= res.data.mniContent.length; i++) {
              if (res.data.mniContent[i] && res.data.mniContent[i].viewUri) {
                hasUplaod += 1;
              }
            }
            if (hasUplaod === res.data.mniContent.length) {
              that.all = res.data.mniContent.length;
              that.$emit("hasall", res.data.mniContent.length);
            } else {
              that.all = 0;
              that.$emit("hasall", 0);
            }
          }
        }
      });
    },
    // 上传文件成功刷新列表
    successUpload(err, file, fileList) {
      if (err.code === 20000) {
        this.getFilsListHandleUser();
      } else {
        this.$message.error(err.msg);
        this.$refs.fileUplaod.clearFiles();
      }
    },
    errorUpload(err, file, fileList) {
      console.log(err, file, fileList);
    },
    // 删除图片
    async removeImg(id) {
      const res = await deleteFile(id);
      if (res.code === 20000) {
        this.$message.success(res.msg);
        this.getFilsListHandleUser();
      }
    },
    beforeAvatarUpload(file) {
      // let types = ['image/jpeg', 'image/jpg', 'image/png'];
      // const isImage = types.includes(file.type);
      // if (!isImage) {
      //   this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!');
      // }
    },
    downloadImg(url) {
      const a = document.createElement("a");
      a.href = url;
      a.click();
    }
  }
};
</script>

<style lang="scss" scoped>
.marginRight {
  margin-right: 10px;
}
.pdfDiaLog {
  height: 500px;
  overflow-y: scroll !important;
  .dialog-footer{
    display: flex;
    justify-content: flex-end;
  }
}
</style>
